<template>
  <div id="Index">
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"
        ><div class="grid-content bg-purple-light">
          <el-container style="height: 100vh; font-weight: bold">
            <el-header>
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
              >
                <el-menu-item>
                  <img class="mlogo" src="../../assets/logo.png" alt="" />
                </el-menu-item>
                <el-menu-item
                  index="1"
                  @click="toHome()"
                  style="margin: 0 auto"
                >
                  首页
                </el-menu-item>
                <el-menu-item index="2" @click="toRecruit()">
                  找工作
                </el-menu-item>
                <el-menu-item index="3" @click="toPersonal()">
                  求职日记
                </el-menu-item>

                <el-menu-item style="float: right; padding: 3px 0">
                  <el-row>
                    <span v-show="!hasLogin">
                      <el-button type="success" @click="login()" round>
                        登录
                      </el-button>
                      <!--<el-button type="warning" round>注册</el-button>-->
                    </span>

                    <span v-show="hasLogin">
                      <el-dropdown :hide-on-click="false">
                        <span class="el-dropdown-link">
                          {{ form.name }}
                          <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>
                            <el-form :inline="true">
                              <el-link type="primary" @click="dialog2()">
                                投递记录
                              </el-link>
                            </el-form>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-form :inline="true">
                              <el-link type="primary" @click="dialog()">
                                我的信息
                              </el-link>
                            </el-form>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-link type="danger" @click="logout()">
                              退出
                            </el-link>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </span>
                  </el-row>
                </el-menu-item>
              </el-menu>
              <div class="line"></div>
            </el-header>

            <!--弹出的弹窗内容-->
            <el-dialog
              title="我的投递记录"
              :visible.sync="dialogDelivery"
              center
              width="80%"
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                "
              >
                <el-form :inline="true" label-width="100px">
                  <el-table
                    :data="tableData"
                    style="width: 1000px; margin: 0 auto"
                  >
                    <el-table-column type="index" width="50"></el-table-column>
                    <!-- <el-table-column prop="id" label="ID"></el-table-column> -->
                    <el-table-column
                      prop="cname"
                      label="投递公司"
                    ></el-table-column>
                    <el-table-column
                      prop="post"
                      label="投递岗位"
                    ></el-table-column>
                    <el-table-column
                      prop="delTime"
                      label="投递时间"
                    ></el-table-column>
                    <el-table-column label="投递状态">
                      <template slot-scope="scope">
                        <div v-if="scope.row.status === 0">
                          <el-tag>申请中...</el-tag>
                        </div>
                        <div v-else-if="scope.row.status === -1">
                          <el-tag type="warning">已取消</el-tag>
                        </div>
                        <div v-else-if="scope.row.status === 1">
                          <el-tag type="success">已通过</el-tag>
                        </div>
                        <div v-else>
                          <el-tag type="danger">已拒绝</el-tag>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="cancel(scope.row)">
                          取消
                        </el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.row)"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogDelivery = false">
                  确 定
                </el-button>
              </span>
            </el-dialog>

            <!--弹出的弹窗内容-->
            <el-dialog
              title="我的信息"
              :visible.sync="dialogVisible"
              center
              width="50%"
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                "
              >
                <el-form :inline="true" label-width="100px">
                  <el-form-item label="姓名">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入姓名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio v-model="form.sex" label="男">男</el-radio>
                    <el-radio v-model="form.sex" label="女">女</el-radio>
                  </el-form-item>
                  <el-form-item label="年龄">
                    <el-input
                      v-model="form.age"
                      placeholder="请输入年龄"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input
                      v-model="form.phone"
                      placeholder="请输入手机号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input
                      v-model="form.email"
                      placeholder="请输入邮箱"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="政治面貌">
                    <el-select v-model="form.political" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="现居住地">
                    <el-input
                      v-model="form.address"
                      placeholder="请输入现居住地"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit()">确 定</el-button>
              </span>
            </el-dialog>

            <el-container>
              <el-main>
                <router-view />
              </el-main>
            </el-container>
          </el-container>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogDelivery: false,

      activeIndex: "aa",
      hasLogin: false,

      form: [],
      tableData: [],

      id: this.$store.getters.getStudent.id,

      // name: this.$store.getters.getStudent.name,
      // sex: this.$store.getters.getStudent.sex,
      // phone: this.$store.getters.getStudent.phone,
      // email: this.$store.getters.getStudent.email,
      // address: this.$store.getters.getStudent.address,
      // age: this.$store.getters.getStudent.age,
      // value: this.$store.getters.getStudent.political,

      options: [
        {
          value: "中共党员",
          label: "中共党员",
        },
        {
          value: "中共预备党员",
          label: "中共预备党员",
        },
        {
          value: "共青团员",
          label: "共青团员",
        },
        {
          value: "民主党派人士",
          label: "民主党派人士",
        },
        {
          value: "普通公民",
          label: "普通公民",
        },
      ],
    };
  },
  created() {
    if (this.id) {
      this.hasLogin = true;
      this.find();
      this.page();
    }
  },
  methods: {
    page() {
      const _this = this;
      const id = _this.$store.getters.getStudent.id;
      // console.log("stuID:" + id);

      _this.$axios.get("/stuDelivery/" + id).then((res) => {
        console.log(res);
        _this.tableData = res.data.data;
      });
    },
    cancel(e) {
      this.$confirm("是否取消对该岗位的申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/upDelivery/" + e.id).then((res) => {
            console.log(res);
            window.location.reload();
          });
          this.$message({
            type: "success",
            message: "取消申请成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "未取消申请",
          });
        });
    },
    handleDelete(e) {
      this.$confirm("是否删除该申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/delDelivery/" + e.id).then((res) => {
            console.log(res);
            window.location.reload();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit() {
      this.$axios.post("/studentEdit", this.form).then((res) => {
        console.log(res);
        this.$message({
          message: "操作成功",
          type: "success",
        });
        location.reload();
      });
    },
    dialog() {
      this.dialogVisible = true; //显示弹窗
    },
    dialog2() {
      this.dialogDelivery = true; //显示弹窗
    },
    toHome() {
      this.$router.push("/userHome");
    },
    toRecruit() {
      this.$router.push("/user/recruit");
    },
    toPersonal() {
      // 判断是否已经登录，若未登录跳转登录页面
      if (this.id == null) {
        this.$confirm("你还未登录, 是否登录?", "提示", {
          confirmButtonText: "去登录",
          cancelButtonText: "返回首页",
          type: "warning",
        })
          .then(() => {
            this.login();
          })
          .catch(() => {
            this.toHome();
            this.$router.go(0);
          });
      } else {
        this.$router.push("/user/personal");
      }
    },
    login() {
      this.$router.push("/");
    },
    logout() {
      this.$store.commit("REMOVE_INFO");
      window.location.reload();
    },
    find() {
      const _this = this;
      _this.$axios.get("/stu/" + this.id).then((res) => {
        console.log(res);
        _this.form = res.data.data;
      });
    },
  },
};
</script>

<style scoped>
.el-menu-demo {
  /*  background-color: #9a6925;*/
  margin: 0 auto;
  text-align: center;
}
.el-menu--horizontal > div > .el-submenu {
  float: left;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-header {
  text-align: center;
  line-height: 60px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.mlogo {
  height: 60%;
  margin-top: 10px;
}
</style>
